<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Typography 排版</title>
	<!-- 导入样式 -->
	<!-- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> -->
	<link rel="stylesheet" href="../static/css/element2.css">
	<!-- 导入 Vue 3 -->
	<!-- <script src="//unpkg.com/vue@next"></script> -->
	<script src="../static/js/vue.global.prod.js"></script>
	<!-- <script src="../static/js/vue.global.js"></script> -->
	<!-- 导入组件库 -->
	<!-- <script src="//unpkg.com/element-plus"></script> -->
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style>
html{
	--el-font-size-diy: 24px;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。</p>
	<div class="demo-term-box">
		<img src="../static/css/1.png" alt="" />
		<img src="../static/css/1.png" alt="" />
		<img src="../static/css/1.png" alt="" />
		<img src="../static/css/1.png" alt="" />
		<img src="../static/css/1.png" alt="" />
		<img src="../static/css/1.png" alt="" />
	</div>
	
	<el-divider content-position="left">字号</el-divider><!-- =============================================================== -->
	<p class="desc">字号可以用变量来控制</p>
	<p style="font-size: var(--el-font-size-diy);">查看这一段文字的大小。。。（修改--el-font-size-diy的值可以控制）</p>
	<p>下面的字体大小，修改../static/css/element2.css 文件中的对应变量可以改变大小，如修改--el-font-size-extra-small</p>
	<table class="demo-typo-size">
		<tbody>
			<tr>
				<td>Level</td>
				<td>Font Size</td>
				<td class="color-dark-light">Demo</td>
			</tr>
			<tr v-for="(fontSize, i) in fontSizes" :key="i" :style="`font-size: var(--el-font-size-${fontSize.type})`">
				<td>{{ fontSize.level }}</td>
				<td>{{ fontSize.size + ' ' + formatType(fontSize.type) }}</td>
				<td>Build with Element</td>
			</tr>
		</tbody>
	</table>
	
	<el-divider content-position="left">行高</el-divider><!-- =============================================================== -->
	<p class="desc"></p>
	<div>
	    <img class="lineH-left" src="../static/css/2.png" />
	    <ul class="lineH-right">
	      <li>line-height:1 <span>No line height</span></li>
	      <li>line-height:1.3 <span>Compact</span></li>
	      <li>line-height:1.5 <span>Regular</span></li>
	      <li>line-height:1.7 <span>Loose</span></li>
	    </ul>
	  </div>
	
</div>
</body>
<script>
const fontSizes = [
	{level: 'Supplementary text',	type: 'extra-small',	size: '12px',},
	{level: 'Body (small)',			type: 'small',			size: '13px',},
	{level: 'Body',					type: 'base',			size: '14px',},
	{level: 'Small Title',			type: 'medium',			size: '16px',},
	{level: 'Title',				type: 'large',			size: '18px',},
	{level: 'Main Title',			type: 'extra-large',	size: '20px',},
]
const Main = {
	data() {
		return {
			msg: 'Hello Vue!!',
			fontSizes,
		}
	},
	methods: {
		formatType(type) {
			return type.split('-').map((item) => item.charAt(0).toUpperCase() + item.slice(1)).join(' ')
		},
	},
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");

</script>
</html>